<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>修改密码的验证</title>
    <link rel="stylesheet" href="../static/css/styles.css" />
    <link rel="stylesheet" href="../static/css/font-awesome-4.7.0/css/font-awesome.min.css" />
    <script src="../static/js/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
            font-family: "microsoft yahei";
        }
        
        html,
        body {
            background-image: url({{ url_for('static', filename='images/login-bg.png') }});
            background-size: 100% 100%;
            height: 100%;
        }
        
        .tishima {
            position: absolute;
            top: 10%;
            left: 30%;
            right: 40%;
            bottom: 40%;
            border-radius: 1px;
            border-radius: 10px;
            background-color: #e5e5ec;
        }
        
        .tishi,
        .xiugai,
        .a,
        .b,
        .aqq,
        .aww {
            position: absolute;
            width: 100%;
        }
        
        table.xiugai {
            top: 13%;
            background-color: #f8f9fc;
            height: 60%;
            left: 5%;
            width: 90%;
            border: 0px;
            border-radius: 5px;
            color: rgb(46, 1, 1);
            font-size: 16px;
            text-align: center;
        }
        
        .a {
            top: 90%;
            left: 0%;
        }
        
        .b {
            top: 80%;
            left: 0%;
        }
        
        input.aww {
            background-color: #467FE6;
            height: 40px;
            width: 30%;
            border: 0px;
            border-radius: 5px;
            color: #FFF;
            font-size: 16px;
            text-align: center;
            left: 15%;
            bottom: 10%
        }
        
        input.aqq {
            background-color: #467FE6;
            height: 40px;
            width: 30%;
            border: 0px;
            border-radius: 5px;
            color: #FFF;
            font-size: 16px;
            text-align: center;
            left: 55%;
            bottom: 10%
        }
        
        .tips {
            font-size: 30px;
            color: #929090;
            text-align: center;
            font-family: "楷体", "楷体_GB2312";
        }
        
        .m {
            font-size: 20px;
            color: #250202;
            text-align: center;
        }
        
        input.n {
            background-color: #F2F2FA;
            border: 0px;
            border-radius: 5px;
            width: 200px;
            height: 40px;
        }
    </style>
</head>

<form class="tishima" action="{{url_for('modify')}}" method="post">
    <h1 class="tips">修改密码</h1>
    <p id="passModifyMess" style="color: red;" class="tishi"></p>
    <table cellpadding=" 0 " width="50% " class="xiugai ">
        <tr>
            <td class="m">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新密码：</td>
            <td><input type="password" class="n" name="newpass" id="newpass" placeholder="6-20位 数字字母下划线 " /></td>
        </tr>
        <tr>
            <td class="m">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确认密码：</td>
            <td><input type="password" class="n" name="confirmpass" id="confirmpass" placeholder="与上面密码一致 " /></td>
    </table>
    <div class="a">
        <input type="submit" id="submit" value="提交 " class="aww" />
        <input type="reset" id="reset" value="重置 " class="aqq" />
    </div>
</form>


<body>
    <script>
        window.onload = function() {
            var reset = document.getElementById('reset');
            var fm = document.getElementsByTagName('form')[0];
            var passModifyMess = document.getElementById('passModifyMess');
            reset.onclick = function() {
                newpass.value = '';
                confirmpass.value = '';
                newpass.focus();
            };
            fm.onsubmit = function() {
                if (!/^[\w]{6,20}$/.test(newpass.value)) {
                    alert("新密码不合法！");
                    newpass.value = '';
                    confirmpass.value = '';
                    newpass.focus();
                    return false;
                }
                if (newpass.value != confirmpass.value) {
                    alert("两次输入的新密码不一致，请重新输入！");
                    newpass.value = '';
                    confirmpass.value = '';
                    newpass.focus();
                    return false;
                }
                // else{
                // alert(newpass.value);
                // var new=newpass.value;
                // var xml = new XMLHttpRequest();
                // xml.open("get ","http://127.0.0.1:8080/modifypass/ "+new,true);
                // xml.send();
                // alert("修改成功 ");
                // return true;}
                return true;
            };
        };
    </script>
</body>

</html>